<template>
    <div class="wrap">
        <div class="page-head">
            <a-breadcrumb>
                <a-breadcrumb-item>{{ $t('messageLog.messageLog.60zeexuwslo0') }}</a-breadcrumb-item>
                <a-breadcrumb-item>{{ $t('messageLog.messageLog.60zeexuwzlo0') }}</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <c-table-search v-model:model="form.data" @refresh="getData">
            <a-col :span="8">
                <a-form-item field="value" :label="$t('messageLog.messageLog.60zeexux00w0')">
                    <!-- <a-range-picker style="width: 360px; margin: 0 24px 24px 0;" show-time
                        :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }" format="YYYY-MM-DD HH:mm"
                        @change="onChange" @select="onSelect" @ok="onOk" /> -->
                    <a-range-picker style="width: 360px; margin: 0 24px 24px 0;" show-time
                        :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }" format="YYYY-MM-DD HH:mm" />
                </a-form-item>
            </a-col>
            <template v-slot:refresh>
                <a-button type="outline" @click="refresh">
                    <template #icon>
                        <icon-loop />
                    </template>
                </a-button>
            </template>
        </c-table-search>
        <div class="table-scroll">
            <c-table v-model:data="list">
                <a-table-column :title="$t('messageLog.messageLog.60zeexux07w0')" data-index="key" ellipsis tooltip
                    :width="70"></a-table-column>
                <a-table-column :title="$t('messageLog.messageLog.60zeexux10k0')" data-index="deviceName" ellipsis
                    tooltip :width="260"></a-table-column>
                <a-table-column :title="$t('messageLog.messageLog.60zeexux1880')" data-index="deviceType" ellipsis
                    tooltip :width="260"></a-table-column>
                <a-table-column :title="$t('messageLog.messageLog.60zeexux1ic0')" data-index="deviceKey" ellipsis
                    tooltip :width="240"></a-table-column>
                <a-table-column :title="$t('messageLog.messageLog.60zeexux1o40')" data-index="messageType" ellipsis
                    tooltip :width="180"></a-table-column>
                <a-table-column :title="$t('messageLog.messageLog.60zeexux1ww0')" data-index="data" ellipsis tooltip
                    :width="240"></a-table-column>
                <a-table-column :title="$t('messageLog.messageLog.60zeexux22g0')" data-index="time" ellipsis tooltip
                    :width="240"></a-table-column>
                <a-table-column :title="$t('messageLog.messageLog.60zeexux27w0')">
                    <template #cell="">
                        <a-space>
                            <a-button type="text">{{ $t('messageLog.messageLog.60zeexux2d40') }}</a-button>
                        </a-space>
                    </template>
                </a-table-column>
            </c-table>
        </div>
    </div>
</template>

<script lang='ts' setup>
const emit = defineEmits(['refresh'])
const refresh = () => {
    emit('refresh')
}
const form = reactive({
    data: {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: ''
    }
})
const list = [{
    key: 1,
    deviceName: t('messageLog.messageLog.60zeexux2hk0'),
    deviceType: t('messageLog.messageLog.60zeexux2mc0'),
    deviceKey: 'AOA-12',
    messageType: t('messageLog.messageLog.60zeexux2rg0'),
    data: '',
    time: '2107-02-07 06:26:59'
}, {
    key: 2,
    deviceName: t('messageLog.messageLog.60zeexux2hk0'),
    deviceType: t('messageLog.messageLog.60zeexux2mc0'),
    deviceKey: 'AOA-12',
    messageType: t('messageLog.messageLog.60zeexux2rg0'),
    data: '',
    time: '2107-02-07 06:26:59'
}, {
    key: 3,
    deviceName: t('messageLog.messageLog.60zeexux2hk0'),
    deviceType: t('messageLog.messageLog.60zeexux2mc0'),
    deviceKey: 'AOA-12',
    messageType: t('messageLog.messageLog.60zeexux2rg0'),
    data: '',
    time: '2107-02-07 06:26:59'
}, {
    key: 4,
    deviceName: t('messageLog.messageLog.60zeexux2hk0'),
    deviceType: t('messageLog.messageLog.60zeexux2mc0'),
    deviceKey: 'AOA-12',
    messageType: t('messageLog.messageLog.60zeexux2rg0'),
    data: '',
    time: '2107-02-07 06:26:59'
}, {
    key: 5,
    deviceName: t('messageLog.messageLog.60zeexux2hk0'),
    deviceType: t('messageLog.messageLog.60zeexux2mc0'),
    deviceKey: 'AOA-12',
    messageType: t('messageLog.messageLog.60zeexux2rg0'),
    data: '',
    time: '2107-02-07 06:26:59'
}];
const getData = () => {
    // console.log('111')
}
// 选择时间
// const onSelect = (dateString: any, date: any) => {
//     console.log('onSelect', dateString, date)
// }
// const onChange = (dateString: any, date: any) => {
//     console.log('onChange: ', dateString, date)
// }
// const onOk = (dateString: any, date: any) => {
//     console.log('onOk: ', dateString, date)
// }
</script>

<style scoped lang="less"></style>